<template>
  <div class="com-container">
    <div ref="chart" class="com-chart"></div>
  </div>
</template>

<script>
import { markRaw } from 'vue';
import * as echarts from 'echarts'
require('echarts/theme/dark');
export default {
  data() {
    return {
      chartInstance: null,
      bmiData: null,
      total: 0,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chartInstance = markRaw(echarts.init(this.$refs.chart, 'dark'))
      const initOption = {
        title: {
          text: '▎ 人员BMI分类饼图',
          left: 8,
          top: 8,
        },
        legend: {
          top: '15%',
          icon: 'circle'
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: arg => {
            // console.log(arg)
            // 计算百分比
            const percentage = parseInt((arg.value / this.total) * 100) + '%';
            return `${arg.name}: ${percentage}`;
          }
        },
        series: {
          type: 'pie',
          top: '20%',
          buttom: '5%',
          label: {
            // 隐藏文字
            show: false,
            position: 'center',
          },
          labelLine: { // 隐藏线
            show: false,
          },
          itemStyle: {
            borderColor: '#100C2A'
          },
          emphasis: {
            label: { // 高亮显示文字
              show: true,
              color: 'white',
              fontWeight: 'bold'
            },
          }
        }
      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      //axios 获取数据
      const res = await this.$axios.get('chart2')
      // console.log(res)
      this.bmiData = res.data
      // console.log(this.bmiData)
      this.updataChart()
    },
    updataChart() {
      const seriesData = this.bmiData.map(item => ({
        name: item.bmiCategory,
        value: item.nums - 7300
      }))
      // 计算总和
      this.total = seriesData.reduce((sum, item) => sum + item.value, 0);
      const dataOption = {
        series: [
          {
            type: 'pie',
            data: seriesData,
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.chart.offsetWidth / 100 * 4
      console.log('2:' + titleFontSize)
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          itemStyle: {
            fontSize: titleFontSize / 2
          }
        },
        series: [
          {
            radius: [titleFontSize * 4.5, titleFontSize * 2.2],
            itemStyle: {
              borderRadius: titleFontSize / 3,
              borderWidth: titleFontSize / 15
            },
            emphasis: {
              label: { 
                fontSize: titleFontSize / 1.2,
              },
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }
}
</script>

<style></style>